<template>
<div>
	<Select v-model="selected" filterable remote :remote-method="getAuthorList" :loading="isLoading" :placeholder="placeholder" ref="selectAuthor" v-if="edit || !injectData.uuid" :style="injectData.uuid?'width:calc(100% - 60px)':''" :clearable="true" @on-change="selectChange">
			<Option v-for="(option, index) in authorList" :value="option.uuid" :key="option.uuid">{{option.name}}</Option>
		</Select>
	<Button type="ghost" v-if="injectData.uuid && edit" @click="cancelEdit()">取消</Button>

	<div class="have-inject" v-if="injectData.uuid && !edit">
		<span>{{injectData.name}}</span>
		<Button icon="edit" type="ghost" @click="startEdit()">修改</Button>
	</div>

</div>
</template>

<script>
export default {
	name: "authorSelector",
	computed: {
		user() {
			return this.$store.state.user.data;
		}
	},
	props: {
		placeholder: {
			type: String,
			default: "请选择"
		},
		injectData: {
			type: Object,
			default: function() {
				return {};
			}
		}
	},
	data() {
		return {
			selected: "",
			isLoading: false,
			authorList: [],
			edit: true
		};
	},
	methods: {
		getAuthorList(key_word) {
			if (this.isLoading) return;
			this.isLoading = true;
			this.http.post(this.postUrl.getAuthorList, {
				token: this.user.tokenList[0],
				pageNum: 1,
				pageSize: 25,
				key_word: key_word
			}).then(data => {
					console.log(data);

					if (data.code > -1) {
						this.authorList = JSON.parse(JSON.stringify(data.data.data_list));
						sessionStorage.setItem(
							"authorSelectorList",
							JSON.stringify(data.data.data_list)
						);
					} else {
						// this.errorHandle(data.msg)
					}
					this.isLoading = false;
				},
				() => {
					this.isLoading = false;
					// this.errorHandle()
				}
			);
		},
		cancelEdit() {
			this.$emit("input", this.injectData.uuid);
			this.dispatch("FormItem", "on-form-change", this.injectData.uuid);
			this.edit = false;
		},
		startEdit() {
			this.$emit("input", '');
			this.edit = true;
			if (this.selected) {
				this.selected = ''
			}
		},
		selectChange(e) {
			this.$emit("on-change", e);
			this.dispatch("FormItem", "on-form-change", e);
			this.$emit("input", e);
		},
		/**
		 * 这个方法是参照iview源码内，向上广播
		 */
		dispatch(componentName, eventName, params) {
			let parent = this.$parent || this.$root;
			let name = parent.$options.name;

			while (parent && (!name || name !== componentName)) {
				parent = parent.$parent;

				if (parent) {
					name = parent.$options.name;
				}
			}
			if (parent) {
				parent.$emit.apply(parent, [eventName].concat(params));
			}
		}
	},
	mounted() {

		console.log(this.$refs.selectAuthor);
	},
	watch: {
		injectData(val) {
			val = JSON.parse(JSON.stringify(val));
			if (val.uuid) {
				this.dispatch("FormItem", "on-form-change", val.uuid);
				this.edit = false;
			} else {
				setTimeout(() => {
					this.$refs.selectAuthor.clearSingleSelect();
				}, 200);
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.have-inject {
    .ivu-btn-ghost {
        margin-left: 10px;
    }
}
</style>
